<template>
  <el-breadcrumb
    separator="/"
    class="app-container"
  >
    <el-breadcrumb-item
      v-for="item in levelList"
      :key="item.path"
      :to="item.path"
      >{{ item.title }}</el-breadcrumb-item
    >
  </el-breadcrumb>
</template>

<script setup lang="ts">
defineComponent({ name: 'Breakcrumb' });

interface BreadcrumbMeta {
  path: string;
  title: string;
}

const route = useRoute();
const levelList = ref<BreadcrumbMeta[]>([]);

const getBreadcrumb = () => {
  const matched = route.matched
    .filter((item) => item.path !== '/')
    .filter((item) => item.meta && item.meta.title)
    .map((item) => ({
      path: item.children && item.children.length && !item.redirect ? '' : item.path,
      title: item.meta.title as string
    }));

  if (matched.length) {
    // 取出第一个，判断实施是首页
    if (!isDashboard(matched[0].path)) {
      levelList.value = [{ path: '/', title: '首页' }].concat(matched);
    } else {
      levelList.value = matched;
    }
  }
};
/**
 *
 * @param path 判断是否是首页
 */
const isDashboard = (path: string): boolean => {
  return path === '/' || path === '/dashboard';
};

watchEffect(() => {
  !route.path.startsWith('/redirect/') && getBreadcrumb();
});
getBreadcrumb();
</script>

<style lang="scss" scoped></style>
